<template>
	<view style="-webkit-app-region: no-drag;">
		<view v-if="mod == 'bottom'" class="rb-bottom-a" :style="{fontSize:f_size + 'px'}" @click="rbClick">
			<slot></slot>
		</view>
		<view v-if="mod == 'link'" class="rb-bottom-a-link" :style="{fontSize:f_size + 'px'}" @click="rbClick">
			<slot></slot>
		</view>
		<view v-if="mod == 'icon'" class="rb-bottom-a-icon" @click="rbClick">
			<image class="icon-pic" src="../../static/hxx.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		name:"rb-bottom-a",
		props: {
			f_size: {
				type: Number,
				default: 15
			},
			mod: {
				type: String,
				default: 'bottom'
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			
			rbClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style scoped>
	
	.rb-bottom-a {
		padding: 5px 8px;
		background-color: #ff2f21;
		color: white;
		border-radius: 3px;
	}
	
	.rb-bottom-a:hover {
		background-color: #d3241b;
		cursor: pointer;
	}
	
	.rb-bottom-a:active {
		background-color: #c11d18;
	}
	
	.rb-bottom-a-link {
		padding: 5px 8px;
		color: #73738f;
		border-radius: 3px;
		text-decoration: underline;  /* 下划线 */
		font-style: italic;      /* 文字倾斜 */
	}
	
	.rb-bottom-a-link:hover {
		color: #8585a6;
		cursor: pointer;
		text-decoration: underline dotted; /* 改为虚线 underline */
	}
	
	.rb-bottom-a-link:active {
		color: #787895;
		position: relative;
		top: 1px;               /* 轻微下移模拟点击效果 */
	}
	
	.rb-bottom-a-icon {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.rb-bottom-a-icon:hover {
		cursor: pointer;
		opacity: 0.8;
	}
	
	.rb-bottom-a-icon:active {
		position: relative;
		top: 1px;               /* 轻微下移模拟点击效果 */
	}
	
	.icon-pic {
		width: 30px;
		height: 30px;
	}
	
	
</style>